<template>
	<div id="menu_detail">
		<div class="menu_type">
			<van-sidebar v-model="activeKey">
			  <van-sidebar-item :title="item" v-for="(item,index) in menu_type_list" :key="index"></van-sidebar-item>
			</van-sidebar>
		</div>
		<div class="menu_content">
			<van-swipe style="width: 100%;height: 4rem;" :autoplay="3000" :show-indicators="false">
			  <van-swipe-item class="swiper-slide" v-for="(i,index) in swiperlist" :key='index'>
			<van-image
			  width="100%"
			  height="100%"
			  fit="cover"
			  :src="i"
			/></van-swipe-item>
			</van-swipe>
			<!-- <van-image
			  width="100%"
			  fit="contain"
			  src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2692506457,3188160074&fm=26&gp=0.jpg"
			/> -->
			<p style="font-size: 0.34rem;margin-top: 0.2666rem;">新品推荐</p>
			<div v-for="i in ment_tea_list">
				<van-card
				  :price="i.price"
				  :desc="i.text"
				  :thumb="i.url"
				  style="margin: 0.2666rem 0;"
				>
				<template #title>
					<h3 style="font-size: 0.35rem;">{{i.title}}</h3>
				</template>
				<template #num>
				    <van-button round size="mini" type="warning" @click="specsc(i)">选规格</van-button>
				</template>
				</van-card>
			</div>
		</div>
		<specs ref="ss" :specsdata="specslist"></specs>
	</div>
</template>

<script>
	import specs from '@/components/menu/specs.vue'
	export default {
		name: 'menu_detail',
		data(){
			return{
				activeKey:0,
				menu_type_list:["新品推荐","冰淇淋","真果茶","雪王提醒","大师咖啡","双皮奶","经典饮品","雪王提醒","大师咖啡","双皮奶","经典饮品"],
				swiperlist: [
					'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2692506457,3188160074&fm=26&gp=0.jpg',
					'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2233464792,1577214911&fm=26&gp=0.jpg',
					'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2568211340,3107345454&fm=26&gp=0.jpg'
					
				],
				ment_tea_list: [
					{
						url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2351723282,881322285&fm=26&gp=0.jpg',
						title:'桃气泡泡',
						text: '真实的水蜜桃口味，仿佛在口腔跳舞',
						price: "12.00"
					},
					{
						url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4096475297,1627897154&fm=26&gp=0.jpg',
						title:'少女心拿铁',
						text: "少女心爆棚的蔓越莓拿铁",
						price: '10.00'
					},
					{
						url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1121230777,403140859&fm=26&gp=0.jpg',
						title:'橙意满满',
						text: '给我一点橙意，陪你整个夏季',
						price: "9.00"
					},
					{
						url: 'http://p9.itc.cn/q_70/images03/20200619/39e917ceeb2d425fa3edf6be64fec887.jpeg',
						title:'平平无奇',
						text: '一杯好喝的平平无奇',
						price: "7.00"
					},
					{
						url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1213046967,3588724362&fm=26&gp=0.jpg',
						title:'多肉葡萄',
						text: '当季云南葡萄，颗颗手剥果肉，新鲜饱满',
						price: "11.00"
					},
					{
						url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2607601129,2265087037&fm=26&gp=0.jpg',
						title: '布丁奶茶',
						text: '大块布丁加入，甜而不腻，超满足',
						price: "13.00"
					}
				],
				specslist:{
					url: '',
					title: '',
					text: '',
					price: ''
				}
			}
		},
		components:{
			specs
		},
		methods:{
			specsc(i){
				this.$refs.ss.qf()
				this.specslist = i
			}
		}
	}
</script>

<style scoped="scoped">
	#menu_detail{
		display: flex;
		width: 100%;
		
	}
	.menu_type{
		flex: 1;
	}
	.van-sidebar{
		height: calc(100vh - 175px);
	}
	.menu_content{
		flex: 5;
		margin-left: 0.2666rem;
		height: calc(100vh - 175px);
		overflow-y: auto;/*超出设置高度出现滚动条*/
	}
	.menu_content p{
		font-size: 0.24rem;
	}
</style>
